<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div style="display: flex;justify-content: space-between;">
			<div id="map1" style="width: 32%;height: 300px;"></div>
			<div id="map2" style="width: 32%;height: 300px;"></div>
			<div id="map3" style="width: 32%;height: 300px;"></div>
		</div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/glify-browser.js"></script>
		<script>
			loadingPoint();
			loadingLines();
			loadingPolygons();
			// 加载海量多边形
			async function loadingPolygons() {
				let map = L.map("map3", {
					center: [50.5, 16, 0.2],
					zoom: 6,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)

				const res = await fetch('data/polygons.json');
				const data = await res.json()
				const layers = L.glify.shapes({
					map,
					data,
					size: 1,
					color: {
						r: 255,
						g: 2,
						b: 0,
					},
					opacity: 0.2,
					border: true,
					borderOpacity: 0.8,
					click: (e, pointOrGeoJsonFeature) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
					hover: (e, pointOrGeoJsonFeature, xy) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
				})
				layers.addTo(map);
			}
			// 加载海量线
			async function loadingLines() {
				let map = L.map("map2", {
					center: [50.5, 30.5, 0.2],
					zoom: 1,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)

				const res = await fetch('data/lines.json');
				const data = await res.json()
				const layers = L.glify.lines({
					map,
					data,
					size: 1,
					color: {
						r: 255,
						g: 0,
						b: 1,
					},
				})
				layers.addTo(map);
			}
			// 加载海量点
			function loadingPoint() {
				let map = L.map("map1", {
					center: [50.5, 30.5, 0.2],
					zoom: 4,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)
				const points = []
				for (let i = 0; i < 200000; i++) {
					const lat = Math.floor(Math.random() * 180) - 90;
					const lng = Math.floor(Math.random() * 360) - 180;
					points.push([lat, lng])
				}
				// 加载20万点数据
				const layers = L.glify.points({
					map,
					data: points,
					// color: { // 点的颜色
					// 	r: 255,
					// 	g: 0,
					// 	b: 1,
					// },
					size: 10, // 设置点的大小
					sensitivity: 10, //扩大可点击区域的大小，以便更容易点击某个点
					click: (e, pointOrGeoJsonFeature) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
					hover: (e, pointOrGeoJsonFeature) => {
						const index = points.findIndex(item => {
							return item === pointOrGeoJsonFeature
						})
						L.popup()
							.setLatLng(pointOrGeoJsonFeature)
							.setContent("索引" + index)
							.openOn(map);
					},
				})
				layers.addTo(map);
			}
		</script>
	</body>

</html>